<template>
    <div class="secK">
        <div class="top">
            <div class="bx">
                <div class="left">
                    <span>限时秒杀</span>
                    <div class="count">
                        <p>距结束</p>
                        <div>
                            <span>{{ hour }}</span>
                            :
                            <span>{{ min }}</span>
                            :
                            <span>{{ sec }}</span>
                        </div>

                    </div>
                </div>
                <div class="right">
                    <p>更多</p>
                    <img src="https://gw.alicdn.com/imgextra/i2/O1CN01flTGXP1P1k97M3nug_!!6000000001781-2-tps-18-32.png_.webp" alt="">
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="bx"> 
                <div class="banner">
                    <div class="content">
                        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false">
                            <van-swipe-item v-for="(v,index) in arrSwiper" :key="index">
                                <img :src="v.img" alt="">
                                <p>
                                    正在秒杀中
                                </p>
                                <span>
                                    ￥{{ v.price }}
                                </span>
                            </van-swipe-item>
                        </van-swipe>  
                    </div>
                </div>
                <div class="lowPrice">
                    <img src="https://gw.alicdn.com/tps/O1CN019CSXyD1kcTu1L2zli_!!6000000004704-0-yinhe.jpg_170x10000Q75.jpg_.webp" alt="">
                    <div>
                        ￥<p>1</p>
                    </div>
                </div>
                <div class="lowPrice">
                    <img src="https://gw.alicdn.com/tps/O1CN01xcorFZ1imtgCDiwdv_!!6000000004456-0-yinhe.jpg_170x10000Q75.jpg_.webp" alt="">
                    <div>
                        ￥<p>1</p>
                    </div>
                </div>
                <div class="lowPrice">
                    <img src="https://gw.alicdn.com/tps/O1CN01Hk8MpR1LX6rhCoOlf_!!6000000001308-0-yinhe.jpg_170x10000Q75.jpg_.webp" alt="">
                    <div>
                        ￥<p>1</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"",
    data(){
        return {
            hour:0,
            min:0,
            sec:0,
            timer:null,
            arrSwiper:[]
        }
    },
    mounted(){
        this.timer = setInterval(() => {
            // 获取当前时间的日期对象
            let dN = new Date()
            // 获取当前小时
            let nowHour = dN.getHours()
            // 获取点场小时
            let time = nowHour % 2 == 1 ? nowHour += 1 : nowHour += 2
            // 获取点场时间的标准日期对象
            let nowDate = dN.getFullYear() + '-' + (dN.getMonth() / 1 + 1) + '-' + dN.getDate()
            // 获取点场时间的日期对象
            let dF = new Date(nowDate + " " + `${time}:00:00`)
            // 获取时间查, date.parse() 获取距离格林威治事件的毫秒数
            let sub = (Date.parse(dF) - Date.parse(dN)) / 1000
            // 获取小时
            let h = parseInt(sub / 3600)
            this.hour = '0' + h
            // 获取分钟
            let m = parseInt(sub % 3600 / 60)
            this.min = m > 10 ? m : '0' + m
            // 获取秒
            let s = parseInt(sub % 60)
            this.sec = s > 10 ? s : '0' + s
        }, 1000),
        // 轮播
        this.$http({
            url:` http://localhost:3000/everySwiper`,
            method:"get"
        }).then(res=>{
            this.arrSwiper = res.data
        })

    }
}
</script>

<style lang="scss" scoped>
    .secK{
        width: 7.13rem;
        height: 3.25rem;
        margin: 0 auto 0.2rem;
        background: #fff;
        border-radius: 0.24rem;
    }
    .secK .top {
        width: 100%;
        height: 0.76rem;
    }
    .secK .top .bx {
        width: 6.73rem;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }
    .secK .top .bx .left {
        width: 3.28rem;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .secK .top .bx .left>span {
        color: #333333;
        font-size: 0.33rem;
    }
    .secK .top .bx .left .count {
        display: flex;
        align-items: center;
    }
    .secK .top .bx .left .count p {
        font-size: 0.2rem;
        color: #ff4a3e;
    }
    .secK .top .bx .left .count div {
        display: flex;
        margin-left: 0.1rem;
        color: #ff4a3e;
    }
    .secK .top .bx .left .count div span {
        width: 0.3rem;
        height: 0.3rem;
        line-height: 0.3rem;
        background: #fff2f2;
        text-align: center;
    }
    .secK .top .bx .right {
        width: 0.67rem;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .secK .top .bx .right p {
        color: #a2a2a2;
        font-size: 0.26rem;
    }
    .secK .top .bx .right img {
        width: 0.08rem;
        height: 0.16rem;
    }
    .secK .bottom {
        width: 100%;
        height: calc(3.25rem - 0.76rem);
    }
    .secK .bottom .bx {
        width: 6.73rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }
    .secK .bottom .bx .banner {
        width: 1.63rem;
        height: 2.3rem;
        background: #fff3f1;
        border-radius: 0.15rem;
    }
    .secK .bottom .bx .banner .content {
        width: 1.51rem;
        height: 2.14rem;
        margin: 0.07rem auto 0;
        border-radius: 0.15rem;
        overflow: hidden;
    }
    // 轮播图
    .my-swipe .van-swipe-item {
        width: 100%;
        height: 100%;
        text-align: center;
 
    }
    .my-swipe .van-swipe-item img {
        width: 1.51rem;
        height: 1.51rem;
        border-radius: 0.15rem;
    }
    .my-swipe .van-swipe-item p {
        color: #333333;
        font-size: 0.2rem;
    }
    .my-swipe .van-swipe-item span {
        color: #fd281d;
        font-size: 0.24rem;
        font-weight: bold;
    }
    .secK .bottom .bx .lowPrice {
        width: 1.61rem;
        height: 2.20rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .secK .bottom .bx .lowPrice img {
        width: 100%;
        height: 1.6rem;
    }
    .secK .bottom .bx .lowPrice div {
        width: 0.83rem;
        height: 0.45rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 0.24rem;
        font-weight: bold;
        background: url("https://gw.alicdn.com/imgextra/i2/O1CN01rs0QrE1bt7hGnVhd7_!!6000000003522-2-tps-83-48.png") no-repeat center / 100%; 
    }
    .secK .bottom .bx .lowPrice div p {
      
        color: #fff;
        font-size: 0.28rem;
    }
</style>